<template>
  <view class="index_warp">
    <view class="header_warp"></view>
    <view class="card_warp">
      <view class="image_warp flex_y_a">
        <image src="@/static/images/test_back.png" />
        <view class="user_image">
          <image src="@/static/images/teacher.png" />
        </view>
        <view class="score">
          {{ res.fraction }}
          <text>分</text>
        </view>
        <view class="show flex_c">用时：{{ res.duration }}</view>
      </view>
    </view>
    <view class="show_panel flex_a">
      <view class="item flex_y_a">
        <view class="num success">{{ res.answerNum }}</view>
        <view class="title">答对题目</view>
      </view>
      <view class="item flex_y_a">
        <view class="num fail">{{ res.answerIncorrectlyNum }}</view>
        <view class="title">答错题目</view>
      </view>
      <view class="item flex_y_a">
        <view class="num">{{ res.unAnsweredNum }}</view>
        <view class="title">未答题目</view>
      </view>
    </view>
    <view class="btn flex_c" @click="viewWrongTopic">查看错题</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      res: {},
    };
  },
  onLoad(options) {
    this.res = JSON.parse(options.res);
    console.log(this.res);
  },
  methods: {
    viewWrongTopic() {
      this.$u.route("/pages/do_exercise/do_exercise");
    },
  },
};
</script>

<style lang="scss" scoped>
.index_warp {
  position: relative;
  .header_warp {
    width: 750upx;
    height: 230upx;
    border-radius: 0 0 50% 50%;
    background: #0058a3;
  }
  .card_warp {
    position: absolute;
    top: 64upx;
    left: 12upx;
    width: 726upx;
    height: 440upx;
    padding: 12upx 18upx;
    .image_warp {
      width: 100%;
      height: 100%;
      background: #ffffff;
      box-shadow: 0px 6upx 12upx rgba(0, 122, 255, 0.05);
      border-radius: 20upx;
      position: relative;
      .user_image {
        width: 130upx;
        height: 130upx;
        background: rgba(0, 0, 0, 0);
        border-radius: 50%;
        overflow: hidden;
        position: absolute;
        top: -65upx;
        // left: 50%;
        // transform: translateX(-50%);
      }
      .score {
        position: absolute;
        top: 88upx;
        height: 140upx;
        font-size: 100upx;
        font-weight: 800;
        line-height: 140upx;
        color: #0058a3;
        text {
          width: 30upx;
          height: 42upx;
          font-size: 30upx;
          font-family: PingFang SC;
          font-weight: 800;
          line-height: 42upx;
          color: #0058a3;
        }
      }
      .show {
        top: 278upx;
        position: absolute;
        width: 490upx;
        height: 81upx;
        background: #0058a3;
        font-size: 36upx;
        font-weight: bold;
        line-height: 50upx;
        color: #ffffff;
        border-radius: 40upx;
      }
    }
  }

  .show_panel {
    margin-top: 290upx;
    width: 690upx;
    height: 176upx;
    background: #ffffff;
    box-shadow: 0px 0px 20upx rgba(0, 122, 255, 0.05);
    opacity: 1;
    border-radius: 20upx;
    margin-left: 30upx;
    .item {
      .num {
        height: 56upx;
        font-size: 40upx;
        font-weight: 800;
        line-height: 56upx;
      }
      .title {
        margin-top: 18upx;
        width: 112upx;
        height: 40upx;
        font-weight: 500;
        line-height: 40upx;
        color: #999999;
      }
      .success {
        color: #0058a3;
      }
      .fail {
        color: #f34235;
      }
    }
  }

  .btn {
    margin: 84upx 130upx;
    width: 490upx;
    height: 81upx;
    background: rgba(0, 122, 255, 0.1);
    border: 2upx solid #0058a3;
    font-size: 36upx;
    font-weight: bold;
    color: #0058a3;
    border-radius: 40upx;
  }
}
</style>
